<template>
  <div class="app-container">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="queryItems[0].value" size="small" :placeholder="$t('templete.templeteName')" clearable/>
      </el-form-item>
      <el-form-item>
        <el-select
                size="small"
                v-model="queryItems[1].value"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入企业名称关键词"
                :remote-method="remoteMethod"
                :loading="loading"
                style="width: 100%"  >
          <el-option
                  v-for="item in companyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="getDataList()">{{ $t('query') }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button  v-hasPermi="['sys:template:save']" icon="el-icon-plus" size="mini" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
      </el-form-item>
        <el-form-item>
            <el-button  v-hasPermi="['contract:template:uploader']" icon="el-icon-plus" size="mini" type="primary" @click="addOrUpdateHandle()">上传模板</el-button>
        </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['sys:template:delete']" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      size="mini"
      v-loading="dataListLoading"
      :data="dataList"
      border
      stripe
      @selection-change="dataListSelectionChangeHandle"
      @sort-change="dataListSortChangeHandle"
      style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50"/>
      <el-table-column prop="templeteName" :label="$t('templete.templeteName')" header-align="center" align="center">
        <template slot-scope="scope">
          <a :href="scope.row.previewUrl" target="_blank">{{scope.row.templeteName}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="companyName" :label="$t('templete.companyName')" header-align="center" align="center"/>
      <el-table-column prop="templeteStatus" :label="$t('templete.templeteStatus')" sortable="custom" header-align="center" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.templeteStatus === 0" size="mini" type="danger">{{ $t('templete.templeteStatus0') }}</el-tag>
          <el-tag v-else-if="scope.row.templeteStatus === 1" size="mini" type="warning">{{ $t('templete.templeteStatus1') }}</el-tag>
          <el-tag v-else-if="scope.row.templeteStatus === 2" size="mini" type="success">{{ $t('templete.templeteStatus2') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" :label="$t('status')" sortable="custom" header-align="center" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" size="mini" type="danger">{{ $t('status0') }}</el-tag>
          <el-tag v-else size="mini" type="success">{{ $t('status1') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" :label="$t('remark')" header-align="center" align="center"/>
      <el-table-column prop="createTime" :label="$t('createTime')" sortable="custom" header-align="center" align="center" width="180"/>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="180">
        <template slot-scope="scope">
          <el-button  v-hasPermi="['sys:template:edit']" type="text" size="mini" @click="showTemplateEdit(scope.row.recordId)">{{ $t('templete.edit') }}</el-button>
          <el-button  v-hasPermi="['sys:template:update']" type="text" size="mini" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
          <el-button  v-hasPermi="['sys:template:status']"  type="text" size="mini" @click="enableHandle(scope.row)">{{ scope.row.status === 0?$t('status1'):$t('status0')}}</el-button>
          <el-button  v-hasPermi="['sys:template:delete']" type="text" size="mini" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"/>

    <template-edit v-if="isShowTemplateEditVisible" ref="templateEdit" ></template-edit>

    <!-- 分页 -->
    <el-pagination
      slot="footer"
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="limit"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChangeHandle"
      @current-change="pageCurrentChangeHandle">
    </el-pagination>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './template-add-or-update'
import TemplateEdit from './template-fields-edit'

export default {
  name:'contract-template',
  mixins: [ mixinViewModule ],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/manager/template/page',
        getDataListIsPage: true,
        deleteURL: '/manager/template/delete',
        deleteIsBatch: true,
        enableURL: '/manager/template/enable'
      },
      dataForm: {

      },
      companyList:[],
      loading:false,
      queryItems: [
        {
          field: 'templeteName',
          as: 'LIKE',
          value: ''
        },
        {
          field: 'companyId',
          as: 'EQ',
          value: ''
        }
      ]
    }
  },
  components: {
    AddOrUpdate,
    TemplateEdit
  },
  methods: {
    dateFormat:function(row,column) {
      const dateStr = row[column.property]
      if (dateStr != null) {
        const dateMat = new Date(dateStr);
        const year = dateMat.getFullYear();
        const month = dateMat.getMonth() + 1;
        const day = dateMat.getDate();
        const hh = dateMat.getHours();
        const mm = dateMat.getMinutes();
        const ss = dateMat.getSeconds();
        // const timeFormat = year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
        // const timeFormat = year + "-" + month + "-" + day;
        let timeFormat = year+'-'+ (month<10?'0'+month:month)+'-'+ (day<10?'0'+day:day);
        return timeFormat;
      }
    },

    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        this.getCompanyList(query);
      } else {
        this.companyList = [];
      }
    },

    // 获企业客户所列表
    getCompanyList (queryName) {
      return this.$axios.get('/company/page', {
        params: {
          order: 'ASC',
          orderField: 'createTime',
          current: 1,
          size: 20,
          listMode: true,
          queryItems: 'name,LIKE,' + queryName
        }
      }).then(res => {
        this.loading = false
        this.companyList = res.records
        if ('公共模板库'.indexOf(queryName) > -1) {
          this.companyList.push( {id: 0, name: '公共模板库'} )
        }
      }).catch(() => {
      })
    },
  }
}
</script>
